<!-- Template 代码和 Vue 2 一样 -->
<template>
    <p class="msg">{{ msg }}</p>
</template>

<!-- Script 代码需要使用 Vue 3 的新写法-->
<script lang="ts">
    // Vue 3 的 API 需要导入才能使用
    import { defineComponent } from 'vue'

    // 使用 `defineComponent` 包裹组件代码
    // 即可获得完善的 TypeScript 类型推导支持
    export default defineComponent({
        setup() {
            // 在 `setup` 方法里声明变量
            const msg = 'Hello World!'

            // 将需要在 `<template />` 里使用的变量 `return` 出去
            return {
                msg,
            }
        },
    })
</script>

<!-- CSS 代码和 Vue 2 一样 -->
<style scoped>
    .msg {
        font-size: 14px;
    }
</style>